<template>
  <view class="good-list">
    <view v-if="titleName=='用印详情'&&$u.test.object(list)" class="list-item">
      <u-form ref="uForm" :model="list" label-width="160">
        <u-form-item label="申请单名称:">
          <text>{{ list.title }}</text>
        </u-form-item>
        <u-form-item label="审批编号:">
          <text>{{ list.id }}</text>
        </u-form-item>
        <u-form-item label="用印人:">
          <text>{{ list.userName || '暂无' }}</text>
        </u-form-item>
        <u-form-item label="加盖印章:">
          <view v-for="(item,index) in list.useCountVos" :key="index" class="form-item" @click="showToast(item)">
            <u-tag :text="list.devices[0].deviceNames" type="success"></u-tag>
            <u-badge :count="item.useCount" :offset="[-5,-18]" show-zero type="error"></u-badge>
          </view>
        </u-form-item>
        <u-form-item label="加盖次数:">
          <text>{{ list.userCount }}</text>
        </u-form-item>
        <u-form-item label="申请说明:">
          <text>{{ list.content || '暂无' }}</text>
        </u-form-item>
        <u-form-item label="文件详情:" label-position="top">
          <view class="file-Warp">
            <view class="file-Warp-item">
              <view v-for="(item,index) in list.imageList" :key="index" class="item-image-warp">
                <u-image :src="item.fileUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" border-radius="10" class="item-image" height="150rpx"
                         width="150rpx"
                         @click="previewImage(list.imageList,item,index)"></u-image>
                <u-image class="Original" height="35rpx" src="../../../static/image/icon/yuantu.png" width="50rpx"
                         @click="previewImage(list.imageList,item,index,'original')"></u-image>
              </view>
            </view>
            <view v-for="(item,index) in list.fileList" :key="index" class="file-Warp-file" @click="downloadFile(item)">
              <u-image :src="$lizhao.file.lzGetFileType(item.name.slice(item.name.lastIndexOf('.')+1,item.name.length))" class="item-image" height="60rpx"
                       width="60rpx"></u-image>
              <view class="lz-ellipsis-1" style="max-width: 600rpx;">{{ item.name }}</view>
            </view>
          </view>
        </u-form-item>
      </u-form>
      <!-- 申请单状态 0:初始化提交 1:审批中 2:审批通过 3:审批拒绝  4:授权中 5:授权通过 6:授权拒绝 7:已推送  8:用章中 9:已用章 10:审计中 11:审计通过 12:审计拒绝 13:已失效 -->
      <!-- 0,1,2,4,5 ,7可以取消申请 -->
      <!-- 5,8,9 ,7可以推送结束 -->
      <!-- 8,9可以提交审计 -->
      <view v-show="list.auditor" class="footer">
        <u-button v-if="option.clickItem.electronicApplication==true" size="medium" type="primary" @click="initPdfData">
          盖章记录
        </u-button>
        <u-button size="medium" type="primary" @click="btnClick(0)">正常</u-button>
        <u-button size="medium" type="warning" @click="btnClick(1)">驳回</u-button>
      </view>
    </view>
    <!-- 审批流程 -->
    <time-axis v-if="titleName=='审批流程'&&$u.test.array(list)" :timeAxisData="list" class="list-item"></time-axis>
    <!-- 用印记录 -->
    <view v-if="titleName=='用印记录'&&$u.test.array(list)">
      <u-cell-group v-for="(item,index) in list" :key="index">
        <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <text class="title">用章人：</text>
            <text>{{ item.userName }}</text>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <text class="title">当前次数：</text>
            <text>{{ item.useCount }}</text>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <text class="title">状态：</text>
            <u-tag :text="computeError(item.error,'text')" :type="computeError(item.error,'type')" mode="light"
                   size="mini"/>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.errorMsg" :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <view>异常信息：
              <u-tag :text="item.errorMsg" size="mini" type="error"/>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <view v-if="item.modelName">
              <text class="title">使用模式：</text>
              <u-tag :text="item.modelName" mode="light" size="mini" type="success"/>
            </view>
            <view v-else>
              <text class="title">使用模式：</text>
              <u-tag :text="$lizhao.computeType.getTypeName(item.type)" mode="light" size="mini" type="success"/>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <text class="title">用章日期：</text>
            <text>{{ item.realTime }}</text>
          </view>
        </u-cell-item>
        <u-cell-item :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <text class="title">用章位置：</text>
            <text>{{ item.location }}</text>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.camera==true||item.camera==false" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title">
            <text class="text">摄像头状态：</text>
            <u-tag :text="item.camera==true ? '开启': '关闭'" :type="item.camera==true ? 'success': 'warning'"
                   size="mini"/>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.faceImgUrl" :arrow="false" :border-bottom="false" class="u-cell-item">
          <view slot="title">
            <view>人脸图片：</view>
            <view class="image-inline">
              <view>
                <u-image :src="computeImageRn(item)" border-radius="10" class="item-image" height="150rpx"
                         width="150rpx" @click="previewImge(item)"></u-image>
              </view>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.useUrls&&item.useUrls.length>0&&item.camera!=false" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title">
            <view>盖章图片：</view>
            <view class="image-inline">
              <view v-for="(imag,imagIndex) in item.useUrls" :key="imagIndex">
                <u-image v-if="imag.fileUrl&&imag.QSS" border-radius="10" class="item-image" height="150rpx"
                         src="../../../static/qss/jiemi.gif" width="150rpx"></u-image>
                <view v-else class="item-image-warp">
                  <u-image :src="computeImage(imag)" border-radius="10" class="item-image" height="150rpx"
                           width="150rpx" @click="previewImage(item.useUrls,imag,imagIndex)"></u-image>
                  <image class="Original" src="../../../static/image/icon/yuantu.png"
                         @click.stop="previewImage(item.useUrls,imag,imagIndex,'original')"></image>
                </view>
              </view>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.temporaryUrls&&item.temporaryUrls.length>0&&item.camera!=false" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title">
            <view>临时图片：</view>
            <view class="image-inline error-item">
              <view v-for="(imag,imagIndex) in item.temporaryUrls" :key="imagIndex">
                <u-image v-if="imag.fileUrl&&imag.QSS" border-radius="10" class="item-image" height="150rpx"
                         src="../../../static/qss/jiemi.gif" width="150rpx"></u-image>
                <view v-else class="item-image-warp">
                  <u-image :src="computeImage(imag)" border-radius="10" class="item-image" height="150rpx"
                           width="150rpx" @click="previewImage(item.temporaryUrls,imag,imagIndex)"></u-image>
                  <image class="Original" src="../../../static/image/icon/yuantu.png"
                         @click.stop="previewImage(item.temporaryUrls,imag,imagIndex,'original')"></image>
                </view>
              </view>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.passwordUrls&&item.passwordUrls.length>0&&item.camera!=false" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title">
            <view>密码图片：</view>
            <view class="image-inline error-item">
              <view v-for="(imag,imagIndex) in item.passwordUrls" :key="imagIndex">
                <u-image v-if="imag.fileUrl&&imag.QSS" border-radius="10" class="item-image" height="150rpx"
                         src="../../../static/qss/jiemi.gif" width="150rpx"></u-image>
                <view v-else class="item-image-warp">
                  <u-image :src="computeImage(imag)" border-radius="10" class="item-image" height="150rpx"
                           width="150rpx" @click="previewImage(item.passwordUrls,imag,imagIndex)"></u-image>
                  <image class="Original" src="../../../static/image/icon/yuantu.png"
                         @click.stop="previewImage(item.passwordUrls,imag,imagIndex,'original')"></image>
                </view>
              </view>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.auditorUrls&&item.auditorUrls.length>0&&item.camera!=false" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title">
            <view>审计图片：</view>
            <view class="image-inline">
              <view v-for="(imag,imagIndex) in item.auditorUrls" :key="imagIndex">
                <u-image v-if="imag.fileUrl&&imag.QSS" border-radius="10" class="item-image" height="150rpx"
                         src="../../../static/qss/jiemi.gif" width="150rpx"></u-image>
                <view v-else class="item-image-warp">
                  <u-image :src="computeImage(imag)" border-radius="10" class="item-image" height="150rpx"
                           width="150rpx" @click="previewImage(item.auditorUrls,imag,imagIndex)"></u-image>
                  <image class="Original" src="../../../static/image/icon/yuantu.png"
                         @click.stop="previewImage(item.auditorUrls,imag,imagIndex,'original')"></image>
                </view>
              </view>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.replenishList&&item.replenishList.length>0" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title">
            <view>追加图片：</view>
            <view class="image-inline">
              <view v-for="(imag,imagIndex) in item.replenishList" :key="imagIndex">
                <u-image v-if="imag.fileUrl&&imag.QSS" border-radius="10" class="item-image" height="150rpx"
                         src="../../../static/qss/jiemi.gif" width="150rpx"></u-image>
                <view v-else class="item-image-warp">
                  <u-image :src="computeImage(imag)" border-radius="10" class="item-image" height="150rpx"
                           width="150rpx" @click="previewImage(item.replenishList,imag,imagIndex)"></u-image>
                  <image class="Original" src="../../../static/image/icon/yuantu.png"
                         @click.stop="previewImage(item.replenishList,imag,imagIndex,'original')"></image>
                </view>
              </view>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.warnUrls&&item.warnUrls.length>0&&item.camera!=false" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title" style="display: flex;flex-wrap: wrap;">
            <view>按压超时：</view>
            <view class="image-inline error-item">
              <view v-for="(imag,imagIndex) in item.warnUrls" :key="imagIndex">
                <u-image v-if="imag.fileUrl&&imag.QSS" border-radius="10" class="item-image" height="150rpx"
                         src="../../../static/qss/jiemi.gif" width="150rpx"></u-image>
                <view v-else class="item-image-warp">
                  <u-image :src="computeImage(imag)" border-radius="10" class="item-image" height="150rpx"
                           width="150rpx" @click="previewImage(item.warnUrls,imag,imagIndex)"></u-image>
                  <image class="Original" src="../../../static/image/icon/yuantu.png"
                         @click.stop="previewImage(item.warnUrls,imag,imagIndex,'original')"></image>
                </view>
              </view>
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-if="item.overTimesUrls&&item.overTimesUrls.length>0&&item.camera!=false" :arrow="false" :border-bottom="false"
                     class="u-cell-item">
          <view slot="title" style="display: flex;flex-wrap: wrap;">
            <view>超次图片：</view>
            <view class="image-inline error-item">
              <view v-for="(imag,imagIndex) in item.overTimesUrls" :key="imagIndex">
                <u-image v-if="imag.fileUrl&&imag.QSS" border-radius="10" class="item-image" height="150rpx"
                         src="../../../static/qss/jiemi.gif" width="150rpx"></u-image>
                <view v-else class="item-image-warp">
                  <u-image :src="computeImage(imag)" border-radius="10" class="item-image" height="150rpx"
                           width="150rpx" @click="previewImage(item.overTimesUrls,imag,imagIndex)"></u-image>
                  <image class="Original" src="../../../static/image/icon/yuantu.png"
                         @click.stop="previewImage(item.overTimesUrls,imag,imagIndex,'original')"></image>
                </view>
              </view>
            </view>
          </view>
        </u-cell-item>
      </u-cell-group>
    </view>
    <u-modal ref="uModal" v-model="modal.show" async-close show-cancel-button title="建议"
             @cancel="modalCancel" @confirm="modalConfirm">
      <view class="slot-content">
        <u-input v-model="modal.value" border placeholder="请填写您建议" placeholder-style="color: red;"
                 type="textarea"/>
      </view>
    </u-modal>
    <qssAnimateGif ref="qssAnimateGif" style="z-index: 1000;"></qssAnimateGif>
  </view>
</template>

<script>
let that
import {
  mapGetters,
  mapMutations
} from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api']),
    computeImageRn() {
      return (row) => {
        return row.faceImgUrl + '?Authorization=' + this.userInfo.token + '&us=app&width=100'
      }
    },
    computeImage() {
      return (imag) => {
        if (imag.QSS == false) {
          return imag.fileUrl
        } else {
          return imag.fileUrl + '?Authorization=' + this.userInfo.token + '&us=app&width=80'
        }
      }
    },
    computeError() {
      return (error, type) => {
        if (error == -1) {
          return type == 'text' ? '异常' : 'error'
        } else if (error == 0) {
          return type == 'text' ? '正常' : 'success'
        } else if (error == 1) {
          return type == 'text' ? '警告' : 'warning'
        }
      }
    },
    computeType() {
      return (type) => {
        if (type == 0) {
          return '申请单模式'
        } else if (type == 1) {
          return '申请单模式(量子)'
        } else if (type == 2) {
          return '指纹模式'
        } else if (type == 3) {
          return '指纹模式(量子)'
        } else if (type == 4) {
          return '密码模式'
        }
      }
    }
  },
  props: {
    list: {
      type: [Array, Object],
      default() {
        return {}
      }
    },
    //把列表里的所有图片放入到数组中方便下一张
    seeImageList: {
      type: [Array],
      default() {
        return []
      }
    },
    option: { //当前页面信息，从哪里点进的
      type: Object,
      default() {
        return {}
      }
    },
    titleName: { //当前tab名称
      type: String,
      default() {
        return ''
      }
    },
  },
  data() {
    return {
      modal: {
        num: '',
        show: false,
        value: ''
      },
      webView: {
        src: '',
        //要请求的api
        api: {},
        token: '',
        baseUrl: uni.getStorageSync('baseUrl'),
      }
    }
  },
  mounted() {
    that = this
  },
  methods: {
    initPdfData() {
      uni.navigateTo({
        url: '../../electronicSeal/pdfPreview/pdfPreview',
        events: {
          confirm(data) {
            //console.log(data);
          }
        },
        success(res) {
          res.eventChannel.emit('pagePramas', {applicationId: that.option.clickItem.id, type: '申请单记录'})
        }
      });
    },
    //人脸图片
    previewImge(row) {
      if (row.faceImgUrl) {
        uni.previewImage({
          urls: [row.faceImgUrl + '?Authorization=' + this.userInfo.token + '&us=app']
        });
      }
    },
    //浏览图片
    previewImage(list, row, index, type) {
      uni.$lizhao.seeBigImage.previewImage(list, row, index, type, this)
    },
    //同意
    agreeOK() {
      let req = {
        applicationId: this.option.clickItem.id,//用章申请单id
        suggest: this.modal.value,//建议信息
      }
      this.$u.get(this.api.GLOBAL_applicationAuditor_auditorOK, req).then(res => {
        this.$refs.uModal.clearLoading();
        if (res.code == 200) {
          this.goback(res)
        }
      })
    },
    //驳回
    rejectFail() {
      let req = {
        applicationId: this.option.clickItem.id,//用章申请单id
        suggest: this.modal.value,//建议信息
      }
      this.$u.get(this.api.GLOBAL_applicationAuditor_auditorFAIL, req).then(res => {
        this.$refs.uModal.clearLoading();
        if (res.code == 200) {
          this.goback(res)
        }
      })
    },
    //返回
    goback(res) {
      uni.navigateBack({
        delta: 1
      })
      setTimeout(() => {
        uni.showToast({
          title: res.msg,
          icon: 'success',
          duration: 2000
        });
      }, 800)
      //刷新上一列表
      uni.$emit('applicationDetailsToApplicationList', true)
    },
    //弹出层确定
    modalConfirm() {
      if (this.modal.num == 0) {//同意
        this.agreeOK()
      } else if (this.modal.num == 1) {//驳回
        this.rejectFail()
      }
    },
    //弹出层取消
    modalCancel() {
      //显示顶部tab
      uni.$emit('tabsShow', true)
    },
    //点击底部按钮
    btnClick(num) {
      //console.log(num);
      this.modal.num = num
      this.modal.value = ''
      this.modal.show = true
      //隐藏顶部tab
      // uni.$emit('tabsShow',false)
    },
    //附件下载和浏览
    downloadFile(item) {
      this.$lizhao.download.file(item.fileUrl + '?Authorization=' + that.userInfo.token + '&us=app')
    },
    showToast(item) {
      uni.showToast({
        title: `已盖:${item.useCount},剩余:${item.totalCount - item.useCount}`,
        icon: "none"
      });
    },
  }

}
</script>

<style lang="scss">
.good-list {
  background-color: #fff;
  width: 100%;

  .slot-content {
    padding: 20rpx;
  }

  .list-item {
    padding: 30rpx;
    position: relative;
    box-sizing: border-box;

    .file-Warp {
      .file-Warp-item {
        display: flex;
        flex-wrap: wrap;

        .item-image-warp {
          position: relative;
          width: 150rpx;
          height: 150rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;

          .item-image {
          }

          .Original {
            position: absolute;
            right: 6rpx;
            bottom: 14rpx;
          }
        }
      }

      .file-Warp-file {
        display: flex;
        align-items: center;
        overflow: hidden;
        color: #888;

        .item-image {
          margin-right: 20rpx;
        }
      }
    }

    .form-item {
      position: relative;
    }

    .footer {
      position: absolute;
      bottom: -110rpx;
      left: 0;
      width: 100%;
      z-index: 100;
      background-color: #fff;
      padding: 20rpx 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
    }
  }

  .u-cell-item {
    padding: 10rpx 32rpx;

    .image-inline {
      display: flex;
      flex-wrap: wrap;

      .item-image-warp {
        position: relative;

        .item-image {
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }

        .Original {
          position: absolute;
          right: 10rpx;
          bottom: 10rpx;
          width: 50rpx;
          height: 35rpx;
        }
      }
    }

    .error-item {
      color: red;
    }
  }

  .lizhaoImagePicture {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .iconList {
    width: 100%;
  }
}
</style>
